<template>
  <view>
    <my-header></my-header>
    <!-- 顶部导航栏 -->
    <uni-card>
      <!-- 订单列表 -->
      <card-header title="订单管理">
        <view class="create-btn" @tap="createOrder">创建预订单</view>
      </card-header>
      <view class="pd20" v-if="orders.length > 0">
        <!-- 订单项1 -->
        <view class="order-item" v-for="(item, index) in orders" :key="index">
          <view class="order-header">
            <view class="order-id">{{ item.id }}</view>
            <view :class="['order-status', status[item.status - 1].style]">{{ status[item.status - 1].name }}</view>
          </view>
          <view class="order-content">
            <view class="car-info">{{ item.carModel }}</view>
            <view class="car-price">¥{{ item.price }}</view>
          </view>
          <view class="vin-info">VIN:{{ item.vin }}</view>
          <view class="delivery-info" v-if="item.status == 1">{{ item.deliveryTime }}</view>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import localData from '@/static/mock/order.json'; 
export default {
  data() {
    return {
      status: [
        {
          name: "运输中",
          style: "transport",
        },
        {
          name: "已签收",
          style: "received",
        },
        {
          name: "待客户确认",
          style: "pending",
        },
      ],
      orders: localData.list,
    };
  },
  methods: {
    createOrder() {
      uni.navigateTo({
        url: "/pages/createOrder/createOrder",
      });
    },
    getList() {
      // const res = getMockJson("order.js");
      // if (res) {
      //   this.orders = res.list;
      // }
    },
  },
  onLoad() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.create-btn {
  background-color: $uni-primary;
  color: #fff;
  padding: 10rpx 30rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
/* 订单列表样式 */

.order-item {
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  .order-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .order-id {
    font-size: 32rpx;
    color: $uni-primary;
    font-weight: 500;
  }

  .order-status {
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 8rpx;
  }

  .transport {
    background-color: #e8f4ff;
    color: #007aff;
  }

  .received {
    background-color: #e6f7ef;
    color: #00c851;
  }

  .pending {
    background-color: #fff7e6;
    color: #ff9800;
  }

  .order-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10rpx;

    .car-info {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }

    .car-price {
      font-size: 32rpx;
      color: #000;
      font-weight: 500;
    }
  }

  .vin-info {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .delivery-info {
    font-size: 26rpx;
    color: #ff5252;
  }
}
</style>
